<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>PageLog</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="HandheldFriendly" content="True"/>
  <meta name="MobileOptimized" content="720"/>
  <meta http-equiv="Cache-Control" content="max-age=3600"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="baidu-site-verification" content="mlJsiTNxiD"/>
  <meta name="google-site-verification" content="CPogK9tQWL5XIDF9F9x_tJyy1HtpDI8Rv6owOEIkUvM"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all"/>
  <meta name="author" content="借用json.cn官网格式化json数据"/>

  <meta name="keywords"
        content="pageLog ---json格式化"/>
  <meta name="description" content="pageLog"/>

  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/font-awesome.min.css" rel="stylesheet">
  <link href="/css/base.css" rel="stylesheet">
  <style></style>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <script data-ad-client="ca-pub-1130438465287629" async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <![endif]-->
  <!-- Favicons -->
</head>
<body style="overflow:hidden;">

<main class="row-fluid editor-con">

  <!--  左侧原数据区域    -->
  <div class="col-md-5" style="padding:0px;height:100%;">
        <textarea
          id="json-src"
          placeholder="在此输入json字符串或XML字符串..."
          class="form-control common-font-size"
          style="height:100%;padding:10px 10px 10px 30px;border:0;border-right:solid 1px #E5EBEE;border-bottom:solid 1px #eee;border-radius:0;resize: none; outline:none;"
        ></textarea>
  </div>

  <!--  分隔符  -->
  <div id="dragEle"></div>

  <!--  右侧格式化区域    -->
  <div class="col-md-7" style="padding:0;position:relative;height:100%;">

    <!--  工具栏  -->
    <div class="tool" style="position:absolute;">
      <a href="#" class="tip zip" title="压缩" data-placement="bottom"><i class="fa fa-database"></i></a>
      <a href="#" class="tip xml" title="转XML" data-placement="bottom"><i class="fa fa-file-excel-o"></i></a>
      <a href="#" class="tip shown" title="显示行号" data-placement="bottom"><i
        class="glyphicon glyphicon-sort-by-order"></i></a>
      <a href="#" class="tip clear" title="清空" data-placement="bottom"><i class="fa fa-trash"></i></a>
      <a href="#" class="tip save" title="保存" data-placement="bottom"><i class="fa fa-download"></i></a>
      <a href="#" class="tip copy" title="复制" data-clipboard-target="#json-target" data-placement="bottom"><i
        class="fa fa-copy"></i></a>
      <a href="#" class="tip compress" title="折叠" data-placement="bottom"><i class="fa fa-compress"></i></a>
    </div>

    <!--  内容区  -->
    <div
      id="right-box"
      class="common-font-size"
      style="width:100%;height: 100%;border:solid 1px #f6f6f6;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;padding-top:40px;"
    >
      <p class="editor-tip">可点击key和value值进行编辑</p>
      <div
        id="hidden-message-box"
        class="alert alert-danger alert-dismissible" role="alert"
        style="display:none;margin-bottom:0;padding:10px 2vw;font-size: calc(var(--target) + 4px);"
      >
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <p>
          <i class="fa fa-bell" aria-hidden="true"></i>
          提示：<span id="hidden-message">默认警告</span>
        </p>
      </div>
      <div
        id="line-num"
        style="background-color:#fafafa;padding:0px 8px;float:left;border-right:dashed 1px #E5EBEE;display:none;z-index:-1;color:#999;position:absolute;text-align:center;over-flow:hidden;"
      >
        <div>0</div>
      </div>
      <div class="ro" id="json-target" style="padding:0px 25px;white-space: pre-line;word-wrap:break-word;"></div>
    </div>
  </div>
  <br style="clear:both;"/>
</main>

<link href="/css/jquery.numberedtextarea.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.message.js"></script>
<script src="/js/bignumber.min.js"></script>
<script src="/js/jquery.json.js?20200628"></script>
<script src="/js/jquery.xml2json.js"></script>
<script src="/js/jquery.json2xml.js"></script>
<script src="/js/jsonlint.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/FileSaver.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.numberedtextarea.js"></script>
<script src="/js/drag.js?20200628"></script>
<script src="/js/postMessage.js"></script>
<script type="text/javascript">
  $('textarea').numberedtextarea();
  var current_json = '';
  var current_json_str = '';
  var xml_flag = false;
  var zip_flag = false;
  var shown_flag = false;
  var compress_flag = false;
  var isXml = false;
  $('.tip').tooltip();

  function init() {
    xml_flag = false;
    zip_flag = false;
    shown_flag = false;
    compress_flag = false;
    isXml = false;
    renderLine();
    $('.xml').attr('style', 'color:#999;');
    $('.zip').attr('style', 'color:#999;');

  }

  $('#cancelZY').click(function () {
    init();
    var content = $.trim($('#json-src').val());
    var result = '';
    if (content != '') {
      //如果是xml,那么转换为json
      if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
        isXml = true;
        try {
          var json_obj = $.xml2json(content);
          content = JSON.stringify(json_obj);
        } catch (e) {
          result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
          current_json_str = result;
          $('#json-target').html(result);
          return false;
        }

      }
      try {
        var hasZY = $('#cancelZY').prop('checked');
        if (hasZY) {
          content = content.replace(/\\/g, '\\\\');
          content = content.replace(/\\"/g, '\\\\"');
        }

        current_json = jsonlint.parse(content);
        current_json_str = JSON.stringify(current_json);
        //current_json = JSON.parse(content);
        result = new JSONFormat(content, 4).toString();
      } catch (e) {
        result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
        current_json_str = result;
      }

      $('#json-target').html(result);
    } else {
      $('#json-target').html('');
    }
  });
  $('#json-src').keyup(function () {
    init();
    var content = $.trim($(this).val());
    var result = '';
    if (content != '') {
      //如果是xml,那么转换为json
      if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
        try {
          var json_obj = $.xml2json(content);
          content = JSON.stringify(json_obj);
        } catch (e) {
          result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
          current_json_str = result;
          $('#json-target').html(result);
          return false;
        }

      }
      try {
        var hasZY = $('#cancelZY').prop('checked');
        if (hasZY) {
          content = content.replace(/\\/g, '\\\\');
          content = content.replace(/\\"/g, '\\\\"');
        }
        current_json = jsonlint.parse(content);
        current_json_str = JSON.stringify(current_json);
        //current_json = JSON.parse(content);
        result = new JSONFormat(content, 4).toString();
      } catch (e) {
        result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
        current_json_str = result;
      }

      $('#json-target').html(result);
    } else {
      $('#json-target').html('');
    }

  });
  $('#right-box').keyup(function () {
    var text = $('#json-target').html().replace(/<br\/>/g, "\n").replace(/<br>/g, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/ig, " ").replace(/Object{...}/ig, "").replace(/Array\[[0-9]+\]/ig, "");
    if (isXml) {
      $('#json-src').val($.json2xml(JSON.parse(text)))
    } else {
      $('#json-src').val(text)
    }
  });
  $('.xml').click(function () {
    if (xml_flag) {
      $('#json-src').keyup();
    } else {
      var result = $.json2xml(current_json);
      $('#json-target').html('<textarea style="width:100%;position:absolute;height: 80vh;min-height:480px;border:0;resize:none;">' + result + '</textarea>');
      xml_flag = true;
      $(this).attr('style', 'color:#15b374;');
    }

  });
  $('.shown').click(function () {
    if (!shown_flag) {
      renderLine();
      $('#line-num').show();
      $('.numberedtextarea-line-numbers').show();
      shown_flag = true;
      $(this).attr('style', 'color:#15b374;');
    } else {
      $('#line-num').hide();
      $('.numberedtextarea-line-numbers').hide();
      shown_flag = false;
      $(this).attr('style', 'color:#999;');
    }
  });

  function renderLine() {
    var line_num = $('#json-target').height() / 20;
    $('#line-num').html("");
    var line_num_html = "";
    for (var i = 1; i < line_num + 1; i++) {
      line_num_html += "<div>" + i + "<div>";
    }
    $('#line-num').html(line_num_html);
  }

  $('.zip').click(function () {
    if (zip_flag) {
      $('#json-src').keyup();
    } else {
      //$('#json-target').html(current_json_str.replace(/</g,"&lt;").replace(/>/g,"&gt;"));
      $('#json-target').html("<xmp>" + current_json_str + "</xmp>");
      zip_flag = true;
      $(this).attr('style', 'color:#15b374;');
    }

  });
  $('.compress').click(function () {
    if (!compress_flag) {
      $(this).attr('style', 'color:#15b374;');
      //$(this).attr('title','取消折叠').tooltip('fixTitle').tooltip('show');
      $($(".fa-minus-square-o").toArray().reverse()).click();
      compress_flag = true;
    } else {
      while ($(".fa-plus-square-o").length > 0) {
        $(".fa-plus-square-o").click();
      }
      compress_flag = false;
      $(this).attr('style', 'color:#555;');
      $(this).attr('title', '折叠').tooltip('fixTitle').tooltip('show');
    }
  });
  $('.clear').click(function () {
    $('#json-src').val('');
    $('#json-target').html('');
  });
  (function ($) {
    $.fn.innerText = function (msg) {
      if (msg) {
        if (document.body.innerText) {
          for (var i in this) {
            this[i].innerText = msg;
          }
        } else {
          for (var i in this) {
            this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
          }
        }
        return this;
      } else {
        if (document.body.innerText) {
          return this[0].innerText;
        } else {
          return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
        }
      }
    };
  })(jQuery);
  $('.save').click(function () {
    // var content = JSON.stringify(current_json);
    // $('#txt-content').val(content);
    //var text = "hell world";
    var html = $('#json-target').html().replace(/\n/g, '<br/>').replace(/\n/g, '<br>');
    var text = $('#json-target').innerText().replace('　　', '    ');
    var blob = new Blob([text], {type: "application/json;charset=utf-8"});
    var timestamp = new Date().getTime();
    saveAs(blob, "format." + timestamp + ".json");
  });
  $('.copy').click(function () {
    //$.msg("成功复制到粘贴板","color:#00D69C;");
    // $(this).tooltip('toggle')
    //       .attr('data-original-title', "复制成功！")
    //       .tooltip('fixTitle')
    //       .tooltip('toggle');
  });
  var clipboard = new Clipboard('.copy');
  $('#json-src').keyup();

  //拖拽
  var totalWidth = $(window).outerWidth();
  var forbidenWidth = totalWidth - 400;
  $('#dragEle').myDrag({
    parent: 'parent', //定义拖动不能超出的外框,拖动范围
    randomPosition: false, //初始化随机位置
    direction: 'x', //方向
    handler: false, //把手
    dragStart: function (x, y) {
      totalWidth = $(window).outerWidth();
      forbidenWidth = totalWidth - 400;
    }, //拖动开始 x,y为当前坐标
    dragEnd: function (x, y) {
      if (x > forbidenWidth) {
        $('#dragEle').offset({top: 0, left: forbidenWidth - 5});
        $('main .col-md-5').width(forbidenWidth);
        $('main .col-md-7').width(totalWidth - forbidenWidth);
      } else if (x < 200) {
        $('#dragEle').offset({top: 0, left: 195});
        $('main .col-md-5').width(200);
        $('main .col-md-7').width(totalWidth - 200);
      } else {
        $('main .col-md-5').width(x);
        $('main .col-md-7').width(totalWidth - x);
      }
    }, //拖动停止 x,y为当前坐标
    dragMove: function (x, y) {
      if (x > forbidenWidth || x < 200) {

      } else {
        $('main .col-md-5').width(x);
        $('main .col-md-7').width(totalWidth - x);
      }
    } //拖动进行中 x,y为当前坐标
  });
  $(window).resize(function () {
    $('#dragEle').css('left', '');
    $('main .col-md-7').css('width', '');
    $('main .col-md-5').css('width', '');
  })
</script>
</body>
</html>
